import React from 'react'
import ReactDOM from "react-dom"

// class Demo extends React.Component {
//     state = {
//         count: 0
//     }
//     myRef = React.createRef()
//     componentDidMount(){
//         this.timer = setInterval(()=>{
//             this.setState({count: this.state.count+1})
//         },1000)
//     }
//     componentWillUnmount(){
//         clearInterval(this.timer)
//     }
//     add = () => {
//         this.setState(state => ({ count: state.count + 1 }))
//     }
//     unmount = () => {
//         ReactDOM.unmountComponentAtNode(document.getElementById("root"))
//     }
//     showRef = () => {
//         alert(this.myRef.current.value)
//     }
//     render() {
//         return (
//             <div>
//                 <h1>当前求和为：{this.state.count}</h1>
//                 <button onClick={this.add}>点我+1</button>
//                 <button onClick={this.unmount}>卸载组件</button>
//                 <br />
//                 <input type="text" ref={this.myRef} />
//                 <button onClick={this.showRef}>展示数据</button>
//             </div>
//         )
//     }
// }

function Demo() {
    const [count, setCount] = React.useState(0)
    const [name, setName] = React.useState("tom")
    const myRef = React.useRef()
    React.useEffect(() => {
        const timer = setInterval(() => {
            setCount(count => count + 1)
        }, 1000)
        return () => {
            clearInterval(timer)
        }
    }, [])
    function add() {
        setCount(count => count + 1)
    }
    function change() {
        setName(name)
    }
    function unmount() {
        ReactDOM.unmountComponentAtNode(document.getElementById("root"))
    }
    function showRef(){
        alert(myRef.current.value)
    }
    return (
        <div>
            <h1>当前求和为：{count}---{name}</h1>
            <button onClick={add}>点我+1</button>
            <button onClick={change}>点我改名</button>
            <button onClick={unmount}>卸载组件</button><br />
            <input type="text" ref={myRef} name="" id="" />
            <button onClick={showRef}>展示数据</button>
        </div>
    )
}

export default Demo